<template>
    <div class="header-main">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="addTodo">
    </div>
</template>

<script>
import {nanoid} from 'nanoid'
    export default {
        name: 'MyHeader',
        methods: {
            addTodo(e){
                // 将收集到的任务包装成对象
                const todoObj = {
                    id: nanoid(),
                    title: e.target.value,
                    done: false
                };
                console.log(todoObj);
                this.addTd(todoObj);
                e.target.value = null;
            }
        },
        props:['addTd']
    }
</script>

<style lang="scss" scoped>
    .header-main{
        width: 500px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        // border: 1px solid green;
        input{
            width: 95%;
            height: 70%;
            border: 1px solid gray;
            border-radius: 4px;
        }
        input:focus{
            outline: none;
            color: rgb(231, 56, 12);
            border: 2px solid rgb(9, 176, 226);
        }
    }
</style>